Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
/* Reset styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-family: sans-serif;
	margin: 0;
	background: linear-gradient(blue, darkblue 20%, #111122);
	overflow: hidden;
	height: 100vh;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.box {
  display: flex;
  justify-content: center;
	position: relative;
  align-items: center;
  flex: 1 0 20%; /* Flex-basis is 25% for 4 columns */
  height: calc(100% / 7); /* Optional, explicitly divides rows */
}

.box > svg {
  max-width: 100%;
  max-height: 100%;
	position: absolute;
	animation: rotat 10000ms linear infinite;
	transition: 1000ms;
}
@keyframes rotat {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes rotat2 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

console.log("Event Fired")
function snowflake(elt) {
	while (elt.firstChild) {
		elt.removeChild(elt.firstChild);
	}
	const randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
	let sfSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	sfSVG.setAttribute('viewBox', '0 0 100 100');
	let sfG = document.createElementNS("http://www.w3.org/2000/svg", "g");
	let sfPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
	let path = '';
	let armW = randInt(10, 40) / 10;
	let midpoints = randInt(3, 12);
	let snowFlakePath = `M 50 50 v-35`;
	for (let j = 1; j < midpoints; j++) {
		let linelength = randInt(20, 120) / 10;
		let yPos = 50 - randInt(50, 350) / 10;
		let path = `M50 ${yPos}l-${linelength} -${linelength}M50 ${yPos}l${linelength} -${linelength}`;
		snowFlakePath += path;
	}
	sfPath.setAttribute('d', snowFlakePath);
	sfPath.setAttribute('fill', 'none');
	sfPath.setAttribute('stroke', '#fff');
	sfPath.setAttribute('stroke-width', armW);
	sfPath.setAttribute('stroke-linecap', 'round');
	sfPath.setAttribute('stroke-linejoin', 'round');
	sfPath.setAttribute('opacity', `${randInt(60,95)/100}`);
	const sfID = `snow${randInt(0,9999)}flake${randInt(0,9999)}`;
	sfPath.id = sfID;
	sfG.appendChild(sfPath);
	let arms = randInt(6, 12);
	let angle = 360 / arms;
	for (let u = 1; u < arms; u++) {
		const useElement = document.createElementNS("http://www.w3.org/2000/svg", "use");
		useElement.setAttribute("href", `#${sfID}`);
		useElement.setAttribute("transform", `rotate(${angle * u} 50 50)`);
		sfG.appendChild(useElement);
	}
	const animDur = `${randInt(10000, 15000)}`;
	timeouts = setTimeout(()=> {
		snowflake(elt);
	}, animDur);
	sfSVG.appendChild(sfG);
	sfSVG.style.animation = `rotat${Math.random() > 0.5 ? 2 : ''} ${animDur}ms cubic-bezier(${randInt(0,100)/100}, ${randInt(0,100)/100}, ${randInt(0,100)/100}, ${randInt(0,100)/100}) infinite`;
	elt.appendChild(sfSVG);
}
let timeouts;
const boxes = document.querySelectorAll('.box');
for (let i = 0; i < boxes.length; i++) {
	snowflake(document.querySelectorAll('.box')[i]);
}
document.querySelector("body").addEventListener("click", () => {
	clearTimeout(timeouts);
	for (let i = 0; i < boxes.length; i++) {
		snowflake(document.querySelectorAll('.box')[i]);
	}
});

Frontend Forever App